<template>
  <div>
    <div class="top">
      <div>
        <div style="flex: 1;">
          <div class="copyColor"></div>
        </div>
        <div style="display: inline-block;flex: 2;">
          <h2 style="line-height: 60px; color: white;">配色方案</h2>
        </div>
        <div style="display: inline-block;flex: 6;">
          <input type="text" id="input" value="点击颜色块快速复制" readonly style="height: 60px; color: white;">
        </div>


      </div>
    </div>
    <div id="app">
      <div>

        <h3>enchanted love</h3>
        <div class="colorBox">
          <div style="background-color: #00A795;"></div>
          <i>#00A795</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #03C399;"></div>
          <i>#03C399</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #05658D;"></div>
          <i>#05658D</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #028091;"></div>
          <i>#028091</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #F0F3BE;"></div>
          <i>#F0F3BE</i>
        </div>
      </div>

      <div>
        <h3>抖s咖啡厅</h3>
        <div class="colorBox">
          <div style="background-color: #FD4C74;"></div>
          <i>#FD4C74</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #00CDFE;"></div>
          <i>#00CDFE</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #FEE001;"></div>
          <i>#FEE001</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #B732CE;"></div>
          <i>#B732CE</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #21CE94;"></div>
          <i>#21CE94</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #C4E203;"></div>
          <i>#C4E203</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #66C616;"></div>
          <i>#66C616</i>
        </div>
      </div>

      <div>
        <h3>小林さんちのメイドラゴン</h3>
        <div class="colorBox">
          <div style="background-color: #DCF1FF;"></div>
          <i>#DCF1FF</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #F47580;"></div>
          <i>#F47580</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #FDFF77;"></div>
          <i>#FDFF77</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #F8CD08;"></div>
          <i>#F8CD08</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #FCD9FE;"></div>
          <i>#FCD9FE</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #EBF6FF;"></div>
          <i>#EBF6FF</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #87FF68;"></div>
          <i>#87FF68</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #D5FF7A;"></div>
          <i>#D5FF7A</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #80CFFB;"></div>
          <i>#80CFFB</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #BBFFD5;"></div>
          <i>#BBFFD5</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #ADFFFE;"></div>
          <i>#ADFFFE</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #C7FFB6;"></div>
          <i>#C7FFB6</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #F8DC88;"></div>
          <i>#F8DC88</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #6B78A3;"></div>
          <i>#6B78A3</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #F3A687;"></div>
          <i>#F3A687</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #F6F6F6;"></div>
          <i>#F6F6F6</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #866867;"></div>
          <i>#866867</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #5DC798;"></div>
          <i>#5DC798</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #67546A;"></div>
          <i>#67546A</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #A44C8C;"></div>
          <i>#A44C8C</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #CB9177;"></div>
          <i>#CB9177</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #FCE9DD;"></div>
          <i>#FCE9DD</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #D8CEFB;"></div>
          <i>#D8CEFB</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #AAA5E0;"></div>
          <i>#AAA5E0</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #8AA7EF;"></div>
          <i>#8AA7EF</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #A3EACB;"></div>
          <i>#A3EACB</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #F183A2;"></div>
          <i>#F183A2</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #A556C5;"></div>
          <i>#A556C5</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #B04C57;"></div>
          <i>#B04C57</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #5C657E;"></div>
          <i>#5C657E</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #F6AAB1;"></div>
          <i>#F6AAB1</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #EBF78F;"></div>
          <i>#EBF78F</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #C8F79C;"></div>
          <i>#C8F79C</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #97D2B8;"></div>
          <i>#97D2B8</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #87C2DE;"></div>
          <i>#87C2DE</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #514AA3;"></div>
          <i>#514AA3</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #BE2752;"></div>
          <i>#BE2752</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #F0F259;"></div>
          <i>#F0F259</i>
        </div>
        <div class="colorBox">
          <div style="background-color: #EF6550;"></div>
          <i>#EF6550</i>
        </div>
        <div class="space"></div>
        <div class="colorBox">
          <div style="background-color: #840123;"></div>
          <i>#840123</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery"
export default {
  name: "ColorScheme",
  mounted() {
    $(".colorBox").click(function(){
      $("#input").val($(this).children("i").html())
      $("#input").select()
      document.execCommand("copy");
      $(".copyColor").css("background-color",$("#input").val())
    })
  }
}

</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.colorBox{
  display: inline-block;
}
.colorBox>div{
  height: 60px;
  width: 60px;
}
.colorBox>i{
  font-style: normal;
  font-size: 13px;
}
#app{
  width: 650px;
  margin: 60px auto;
  border: 1px solid lightgray;
  padding: 20px;
  position: relative;
}
#app>div{
  border-bottom: 1px solid lightgray;
  margin-bottom: 20px;
}
#app h3{
  margin-bottom: 10px;
}
.space{
  display: inline-block;
  width: 18px;
}
#input{
  border: none;
  outline: none;
  background-color: transparent;
}
.copyColor{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: white;
  display: inline-block;
}
.top{
  top: 0;
  position: fixed;
  width: 100%;
  height: 60px;
  background-color:  #05658D;
  display: inline-block;
  z-index: 10;
}
.top>div{
  width: 680px;
  margin: 0 auto;
  display: flex;
}
</style>
